<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <meta content="yes" name="apple-mobile-web-app-capable">
  <meta content="black" name="apple-mobile-web-app-status-bar-style">
  <meta content="telephone=no" name="format-detection">
  <title>硅谷少儿英语-外教上门 小班拼课</title>
  <meta name="description" content="" />
  <meta name="Keywords" content="少儿英语培训，儿童英语，少儿口语，外教上门，外教到家，小班英语" />
  <link rel="shortcut icon" href="https://www.svenglish.cn/images/favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="css/common.css">
  <link rel="stylesheet" href="css/classRegister.css">
</head>

<body class="outLine">
  <div class="page_all" id="outLinePage">
    <div class="page1">
      <div class='header'>
          <a class='logo' href="index.html"><img src='images/logo.png'></a>
      </div>

      <div id="formBox" class="main_box home_form">
        <h3 class="outLine-tit">请完善您的课程报名信息</h3>
        <ul class="form_list">
          <li>
            <input type="text" placeholder="学员英文名" maxlength="50" class="input" v-model="name">
          </li>
          <li v-if="!orderId">
            <input type="text" placeholder="联系电话" maxlength="11" class="input" v-model="mobile">
          </li>
          <li>
            <span class="btn" @click="handleSubmit">提交</span>
          </li>
        </ul>

        <!-- 报名信息 -->
        <div class="registerInfo">
          <h3 class="outLine-tit">您报名的课程信息</h3>
          <div class="registerInfo-main">
            <div class="regMain-flex">
              <div class="regMain-flex-item infoMain">
                <p v-if="classInfo.courseId">
                  <em>课程名称：</em>{{courseItems[classInfo.courseId]}}</p>
                <p v-if="classInfo.classId">
                  <em>课程班号：</em>{{classInfo.classId}}</p>
                <p v-if="classInfo.classHours">
                  <em>课程周期：</em>{{classInfo.classHours}}课时</p>
                <p v-if="classInfo.childrenNum">
                  <em>课程人数：</em>{{classInfo.childrenNum}}人</p>
                <!-- <p v-if="classInfo.englishTeacherId">
                  <em>授课老师：</em>{{classInfo.classTeacher}}</p> -->
                <p v-if="classInfo.locationAddress">
                  <em>上课地点：</em>{{classInfo.locationAddress}} {{classInfo.classLocation}} {{classInfo.addressDetail}}</p>
              </div>
              <div class="regMain-flex-item regFlex-img">
                <img v-if="classInfo.courseId === 10001" src="images/detail/a_cover.jpg">
                <img v-else src="images/detail/b_cover.jpg">
              </div>
            </div>
            <!-- <p v-if="nextClassSchedule.classDate"><em>下次上课时间：</em>{{nextClassSchedule.classDate}} {{nextClassSchedule.startHour }}:{{nextClassSchedule.startMinute}}开始 <span v-if="nextClassSchedule.period">({{nextClassSchedule.period}}课时)</span>  </p> -->
          </div>
        </div>
      </div>
    </div>

    <!--注册成功-->
    <transition name="fade">
      <div class="alertBox fullPage" v-if="alertBox">
        <div class="fullPage-header confirmHeader">
          <!--<span class="iconBefore icon-back" @click="closeAlert(2)"></span>-->
          <h3>课程登记成功</h3>
        </div>
        <article class="fullPage-detail">
          <section class="regSuccess">
            <header class="regSuc-tit">
              {{courseItems[classInfo.courseId]}}课程登记成功
            </header>
            <section class="regSuccess-info">
              请长按下方二维码添加硅谷少儿英语学习助手小程序，管理您的课程
            </section>

            <section class="regContact">
              <div class="regContact-l">
                <img src="images/parent_qr.png">
              </div>
              <div class="regContact-r">
                <p class="regContact-mail">
                  <strong>邮箱:</strong> service@svenglish.cn</p>
                <p>
                  <strong>电话:</strong>
                  <a href="tel:4006863106" class="call">400 686 3106</a>
                </p>
              </div>
            </section>
          </section>
        </article>
      </div>
    </transition>
    <!--//注册成功-->

    <!-- 提示框 -->
    <div class="modal_bg"></div>
    <div class="modal_box">
      <p>请填写联系人</p>
      <div class="modal_footer">
        <div class="modal_btn green js_alert_ok">确定</div>
        <div class="modal_btn js_alert_cancel">取消</div>
      </div>
    </div>
  </div>
  <!-- //page_all -->
  <script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
  <script src="js/zepto.min.js"></script>
  <script src="js/common.js"></script>
  <script src="js/vue.min.js"></script>
  <script src="js/axios.min.js"></script>
  <script src="js/classRegister.js"></script>
</body>

</html>